<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 3D旋转:transform-ritateX(30deg)或者transform:rptateY(30deg) */
        /* rotateX(30deg)绕x轴转  值为正则往后躺  默认演员的横中间线和舞台的中间合并 即x线在舞台中间*/
        /* rptateY(30deg)绕Y轴转  值为正则演员的右肩膀往前扭  默认演员的竖中间线与舞台的中间合并 即Y在舞台中间*/
        /* perspective属性用来定义透视强度，可以理解为人眼到舞台的距离，单位px */
        /* perspective值越大  感觉人离舞台越远  透视效果越差  值越小 仿佛人骑车骑到了坡上 */
        /* 3D旋转由舞台和演员组成 */
        /* 舞台必须设置perspect属性来规定透视强度 */
        /* 演员必须设置transform属性来进行旋转 */
        *{
            margin:0;
            padding:0;
        }
        div{
            width: 202px;
            height: 202px;
            border: 1px solid #000;
            /* 舞台必须设置perspective */
            perspective: 300px;
            margin:20px;
        }
        p{
            width: 200px;
            height: 200px;
            background-color: rgba(127, 255, 212, 0.815);
        }
        div.xx p.p1{
            transform:rotateX(30deg);
        }
        div.xx p.p2{
            transform:rotateX(-30deg);
        }
        div.yy p.p1{
            transform:rotateY(30deg);
        }
        div.yy p.p2{
            transform:rotateY(-30deg);
        }
        div.xy p.p1{
            transform:rotateX(30deg) rotateY(30deg);
        }
        div.xy p.p2{
            transform:rotateX(50deg) rotateY(70deg);
        }

    </style>
</head>
<body>
    <div class="xx">
        <p class="p1"></p>
    </div>
    <div class="xx">
        <p class="p2"></p>
    </div>
    <div class="yy">
        <p class="p1"></p>
    </div>
    <div class="yy">
        <p class="p2"></p>
    </div>
    <div class="xy">
        <p class="p1"></p>
    </div>
    <div class="xy">
        <p class="p2"></p>
    </div>

</body>
</html>